<template>
    <div class="flex flex-col flex-1 height100">
      <div ref="scrollDiv" class="flex flex-1 bg-f1f5f8 height500">
        <chat-message
          v-for="message in groupedMessages"
          :key="message.id"
          :message="message"
        />
      </div>
      <div class="mt-2" v-if="currentConversationId">
        <chat-body-type></chat-body-type>
      </div>
    </div>
</template>

<script>
import ChatBodyType from '@/components/ChatBodyType'
import ChatMessage from '@/components/ChatMessage'
import { mapGetters } from 'vuex'

export default {
  name: 'ChatBody',
  components: {
    ChatBodyType,
    ChatMessage
  },
  props: {
    groupedMessages: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapGetters({
      currentConversationId: 'conversation/getCurrentConversationId'
    })
  },
  watch: {
    'groupedMessages': {
      handler (newVal, oldVal) {
        this.handleScrollBottom()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 滚动到顶部
    handleScrollTop () {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv
        scrollElem.scrollTo({ top: 0, behavior: 'smooth' })
      })
    },
    // 滚动到底部
    handleScrollBottom () {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv
        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.items-center{
  align-items: center;
}
.text-xs{
  font-size: .75rem;
}
.mt-1{
  margin-top: .25rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-col{
  flex-direction: column;
}
.height100{
  height: 100%;
}
.h-full{
  height: 100%;
}
.bg-f1f5f8{
  background-color: #f1f5f8;
}
.height500{
  height: 45rem;
  overflow: auto;
}
.mt-2{
  margin-top: 2px;
}
</style>
